<template>
    <section>
        <el-col :span="24">
            <el-table :header-cell-style="{ background: '#F3F4F7', color: '#555' }" :data="attachData" :max-height="height" border stripe size="mini">
                <el-table-column prop="url" label="下载" width="100" align="center">
                    <template slot-scope="{row}">
                        <el-button class="el-icon-download" type="text" @click="downloadFile(row.url, row.name)"></el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="名称" align="center">
                    <template slot-scope="{row}">
                        <div>
                            <span>{{row.name}}</span>
                            <el-image :src="row.url" :preview-src-list="[row.url]" style="height: 20px;vertical-align: middle;float: right"></el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="类型" width="100" align="center"></el-table-column>
                <el-table-column label=""></el-table-column>
            </el-table>
        </el-col>
    </section>
</template>

<script>

import {downloadImg} from "@/libs/tools";

export default {
    name: "designAttach",
    props: {
        attachData:{
            type: Array,
            default: []
        },
        height: {
            type: Number,
            default: 0
        },
    },
    data() {
        return {
            downloadImg,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            user: {},
            nodeActions: [],
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    watch:{

    },
    methods: {
        //下载
        downloadFile(url, name){
            window.open('/api/tool/fileExport'+`?path=${url}&type=url&name=${name}`, '_self');
        },
    },
    mounted() {

    }
}
</script>

<style scoped>
.el-image /deep/ .el-icon-circle-close:before{
    color: white;
}
</style>
